<template>
  <div class="merchants">

    <el-row>
      <el-col :span="24" align="right">
        <el-switch
            @change="changeStatus"
            v-model="allSwitch"
            active-text="获取全部"
            inactive-text="获取待审核">
        </el-switch>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column prop="merchantid" label="商户ID" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="手机号" align="center">
      </el-table-column>
      <el-table-column prop="data" label="申请资料" align="center">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
      </el-table-column>
      <el-table-column
          align="center"
          fixed="right"
          label="操作"
      >

        <template slot-scope="scope">
          <el-button type="text" @click="finish(scope.row)" size="small"
                     v-show="scope.row.status==='审核通过'">修改
          </el-button>
          <el-button type="text" @click="finish(scope.row)" size="small"
                     v-show="scope.row.status==='待签约'">已签约
          </el-button>
          <el-button type="text" @click="pass(scope.row)" size="small"
                     v-show="scope.row.status==='待审核'">通过
          </el-button>
          <el-button type="text" @click="unpass(scope.row)" size="small"
                     v-show="scope.row.status==='待审核'">不通过
          </el-button>


        </template>

      </el-table-column>

    </el-table>

    <el-dialog
        title="提示"
        :visible.sync="dialogFinishVisible"
        width="30%"
    >

      <el-input v-model="merchantId" placeholder="请输入分配ID"></el-input>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogFinishVisible = false">取 消</el-button>
    <el-button type="primary" @click="FinishSure">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
        title="提示"
        :visible.sync="dialogPassVisible"
        width="30%"
    >
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogPassVisible = false">取 消</el-button>
    <el-button type="primary" @click="PassSure">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
        title="提示"
        :visible.sync="dialogUnpassVisible"
        width="30%"
    >
      <el-input v-model="unpassReason" placeholder="请输入驳回原因"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogUnpassVisible = false">取 消</el-button>
    <el-button type="primary" @click="UnpassSure">确 定</el-button>
  </span>
    </el-dialog>


  </div>
</template>
<script>
import {
  merchantsreviews,
  merchantsreviewsall,
  merchantsCreatePass,
  merchantsCreateUnpass,
  merchantsCreateFinish
} from '@/api/api.js';

export default {
  data() {
    return {
      tableData: [],
      data: "",
      loading: false,
      allSwitch: false,
      dialogFinishVisible: false,
      dialogPassVisible: false,
      dialogUnpassVisible: false,
      unpassReason: '',
      merchantId: ''
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData(params) {
      merchantsreviews(params)
          .then(res => {
            console.log(res.data);
            this.tableData = res.data.data
          })
    },
    changeStatus() {
      if (this.allSwitch) {
        merchantsreviewsall()
            .then(res => {
              console.log(res.data)
              this.tableData = res.data.data
            })
      } else {

        this.getData();
      }
    },
    finish(params) {
      this.dialogFinishVisible = true;

      this.data = params;
    },
    pass(params) {
      this.dialogPassVisible = true;
      this.data = params;
    },
    unpass(params) {
      this.dialogUnpassVisible = true;
      this.data = params;
    },

    FinishSure() {
      if (this.merchantId === '') {
        alert("MerchantId为空!");
      } else {
        this.dialogFinishVisible = false;
        this.loading = true;
        this.data.merchantId = this.merchantId;

        merchantsCreateFinish(this.data)
            .then(res => {
              console.log(res.data)
              this.loading = false;
              this.tableData = res.data.data
            })
      }

    },
    PassSure() {
      this.dialogPassVisible = false;
      this.loading = true;
      merchantsCreatePass(this.data)
          .then(res => {
            console.log(res.data)
            this.loading = false;
            this.tableData = res.data.data
          })
    },
    UnpassSure() {
      if (this.unpassReason === '') {
        alert("不通过原因为空!");
      } else {
        this.dialogUnpassVisible = false;
        this.loading = true;
        this.data.unpassReason = this.unpassReason;
        merchantsCreateUnpass(this.data)
            .then(res => {
              console.log(res.data)
              this.loading = false;
              this.tableData = res.data.data
            })
      }
    }
  }
}
</script>


<style lang="scss" scoped>
.merchants {
  margin-top: 20px;
}
</style>